<template>
    <div>
<h2>房号显示</h2>
<table class="table table-bordered">
    <tr>
        <td>房型名称</td>
        <td>房号</td>
        <td>排序</td>
        <td>备注</td>
        <td>状态</td>
        <td>操作</td>
    </tr>
    <tr v-for="item in list">
        <td>{{item.hName}}</td>
        <td>{{item.hNum}}</td>
        <td>{{item.paiXu}}</td>
        <td>{{item.remate}}</td>
        <td>{{item.states==1?'上架':'下架'}}</td>
        <td>
            <input type="button" v-if="item.states==1"  value="下架" @click="updstate(item.id,item.states)">
            <input type="button" v-else=""  value="上架" @click="updstate(item.id,item.states)">
        </td>
    </tr>
</table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive,toRefs } from 'vue';
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';

const router=useRouter()
let data:any=reactive({
    state:{
    },
    list:[],

})
let {state,list}=toRefs(data)

onMounted(()=>{
    getlist()
})

const updstate=(id:any,states:any)=>{
    if(states==1){
        states=0
    }
    else{
        states=1
    }
    let obj={
        id:id,
        states:states
    }
    axios({
        url:'/api/HouseNum/updstate',
        method:'post',
        params:obj
    })
    .then(res=>{
        console.log(res)
        if(res.data==1){
            alert("修改成功")
            getlist()
        }
        else{
            alert("修改失败")
            return;
        }
    })
    .catch(err=>{
        console.log(err)
    })
}

const getlist=()=>{

axios({
        url:'/api/HouseNum/HouseNumList',
        method:'get',
    })
    .then(res=>{
        console.log(res)
        list.value=res.data.data
    })
    .catch(err=>{
        console.log(err)
    })
}
</script>

<style scoped>

</style>